<template>
    <div class="page_addGruop">
        <x-header></x-header>
        <main class="Site-content">
            <div class="divi">
                <divider>加入战队</divider>
            </div>
            <div class="search">
                <group class="input_search" style="float:left;">
                    <x-input type="text" placeholder="输入战队名字、领队手机号码或城市" v-model="enterText"
                             @on-enter="onEnter"></x-input>
                </group>
                <div class="btn_search btn_rec_normal">
                    <span>搜索</span>
                </div>
            </div>
            <div class="recommend_group">
                <span class="text">战队推荐</span>
                <div class="change">换一批</div>
            </div>
            <div class="showGroup" v-for="item in groups">
                <div class="firstline">
                    <div class="item_name" @click="godetail()">{{item.name}}</div>
                    <div class="item_adress">{{item.adress}}</div>
                </div>
                <div class="secondline">
                    <div class="leader_name">领队：{{item.leader}}</div>
                    <div class="group_number">人数：{{item.number}}</div>
                    <div class="item_addGroup btn_rec_normal" @click="goAdd()">
                        <span>申请加入</span>
                    </div>
                </div>
            </div>
        </main>
        <x-footer></x-footer>
    </div>
</template>

<script>
    import xHeader from './common/header.vue'
    import xFooter from './common/footer.vue'
    import {Divider, XInput, Group} from 'vux'

    export default {
        name: '',
        components: {
            xHeader,
            xFooter,
            Divider,
            XInput,
            Group,
        },
        data() {
            return {
                enterText: '',
                groups: [
                    {name: '超能陆战队', adress: '广东广州', leader: '张尚华', number: 5, id: '1'},
                    {name: '银河系', adress: '北京', leader: '李萌', number: 10, id: '2'},
                    {name: '我的青春我做主', adress: '深圳', leader: '贺喜', number: 12, id: '3'},
                    {name: '奔跑吧兄弟', adress: '江苏南京', leader: '龚丽梅', number: 8, id: '4'},
                ],
            }
        },
        created() {

        },

        methods: {
            //键盘enter监听输入搜索事件
            onEnter(val) {
                console.log('click enter!', val)
            },

            //点击战队名字，跳转到战队详情页
            godetail(){
                this.$router.push('/groupDetail')
            },

            //点击申请加入按钮
            goAdd(){
                this.$router.push({
                    name:'buildGroup',
                    params:{
                        id:'2',
                    }
                })
            },
        },
    }

</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
    .page_addGruop {
        font-size: .9rem;

    .input_search {
        width: calc(100% - 26rem);
    }
    .weui-input {
        padding-left: 1rem;
        height: 2.4rem;
        line-height: 2.4rem;
    }
    .weui-cells {
        margin-top:0 !important ;
    }
    .vux-no-group-title{
        margin-top:0
    }
    .weui-cell {
        height: 2.4rem;
        line-height: 2.4rem;
        font-size: .8rem;
        padding: 0 .4rem;
        visibility: visible;
    }
    .search {
        margin: .6rem;
    .btn_search {
        display: inline-block;
        margin: 1.17rem 0rem 0 1rem;
        width: 3.4rem;
        height: 2.4rem;
        line-height: 2.4rem;
        background-color: #F53952;
    }
    }

    .recommend_group {
        clear: both;
        height: 3.6rem;
        line-height: 3.6rem;
        background-color: #F9D14A;
        padding: 0 1rem;
    .text {
        color: #fff;
        text-align: left;
    }
    .change {
        display: inline-block;
        float: right;
        color: #F53952;
    }
    }
    .showGroup {
        height: 6.5rem;
        background-color: #fff;
        padding: 0 .7rem;
        border-bottom: 1px solid #E0E0E0;
    .firstline {
        height: 2.5rem;
        line-height: 2.5rem;
    .item_name {
        color: #F53952;
        display: inline-block;
    }
    .item_adress {
        float: right;
        color: #999;
        display: inline-block;
    }
    }
    .secondline {
        color: #000;
        height: 2.5rem;
        margin-top: .7rem;
    .item_addGroup {
        float:right;
        width: 6rem;
        height: 2.2rem;
        line-height: 2.2rem;
        background-color: #EE314D;
    }
   .leader_name  {
        display: inline-block;
        width: 6rem;
    }
    .group_number{
        display: inline-block;
        width: 4.5rem;
    }
    }
    }
    }
</style>